<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">番茄详情</block>
		</cu-custom>
		<view class="charts">
			<view>
				<l-echart ref="chart1" @finished="init1"></l-echart>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				data: [],
				single:'',
			};
		},
		onLoad(query) {
			// 通过 this.$route.query 获取携带的参数
			const paramStr = decodeURIComponent(query.data);
			const arrayParam = JSON.parse(paramStr);
			this.data = [...arrayParam]
			this.single=query.target
			this.init1()
		},
		methods: {
			async init1() {
				try {
					const chart1 = await this.$refs.chart1.init(echarts);
					chart1.setOption({
						title: {
							text: `${this.single}专注详情(单位：分钟)`,
						},
						tooltip: {},
						xAxis: {
							type: 'category',
							data: ['学习', '锻炼', '休息', '其他']
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: this.data,
							type: 'bar',
							showBackground: true,
							backgroundStyle: {
								color: 'rgba(180, 180, 180, 0.2)'
							}
						}]
					})
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="less">
.charts{
	margin: 30rpx 10rpx;
}
</style>